<template>
    <el-dialog
        class="select-account-dialog"
        align-center
        :before-close="handleClose"
        :title="dialogTitle"
        v-model="visible"
        width="800px">
        <div class="select-account-dialog-body">
            <div class="select-account-dialog-search">
                <el-alert title="分账方式设置后不支持修改，请谨慎选择！" type="warning" :closable="false" show-icon />
            </div>
            <div class="select-account-dialog-table">
                <el-table :data="props.selected" :height="450" type="expand" row-key="id">
                    <el-table-column v-for="{ prop, ...rest } in tableColumns" :key="prop" :prop="prop" v-bind="rest">
                        <template v-if="prop === 'split_type'" #header>
                            <div class="custom-header-col">
                                <span>分账方式</span>
                                <ZwTooltip type="icon">
                                    <template #content>
                                        逐笔订单分账：用户每支付一笔订单后，系统根据所设置分账接收方和分账比例自动发起分账。<br />
                                        单日汇总分账：单日订单支付金额汇总后，系统次日根据所设置分账接收方和分账比例自动发起分账。<br />
                                        API接入：根据第三方接口传入的分账接收方和分账金额发起分账。
                                    </template>
                                </ZwTooltip>
                            </div>
                        </template>
                        <template #default="{ row }">
                            <template v-if="prop === 'corp_name'">
                                <div class="corp-name">
                                    <div class="corp-name-main">
                                        <ZwTooltip :content="row.corp_name" :line="2" />
                                    </div>
                                    <div class="corp-name-sub" v-if="row.corp_unified_social_credit_code">
                                        <ZwTooltip :content="row.corp_unified_social_credit_code" />
                                    </div>
                                </div>
                            </template>
                            <template v-if="prop === 'split_type'">
                                <el-select v-model="row[prop]" placeholder="请选择分账方式">
                                    <el-option
                                        v-for="item in divisionTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <template #footer>
            <div class="custom-footer">
                <el-button @click="handlePrev">上一步</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/request/index';
import constants from '@/commons/constants';
import { packSelectObjUtil } from '@/commons/utils';
import ZwTooltip from '@/components/ZwTooltip.vue';

const divisionTypeOptions = reactive(packSelectObjUtil(constants.DIVISION_TYPE, false)); // 分账方式

/* ---------------------------------- 父级通信 start ---------------------------------- */
const emit = defineEmits(['handle-confirm', 'update:modelValue', 'handle-prev']);
const props = defineProps({
    // 是否显示控制按钮
    modelValue: {
        type: Boolean,
        default: false
    },
    selected: {
        type: Array,
        default: () => []
    }
});
/* ---------------------------------- 父级通信 end ---------------------------------- */

/* ---------------------------------- 控制弹窗 start ---------------------------------- */
const visible = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

watch(
    () => props.modelValue,
    val => {
        if (val) {
            props.selected.forEach(item => {
                item.split_type = item.split_type ? item.split_type : 'EVERY_ORDER';
            });
        }
    }
);

const dialogTitle = computed(() => {
    return '设置分账方式';
});

/**
 * 上一步按钮
 */
const handlePrev = () => {
    emit('handle-prev', props.selected);
};

// 确认按钮
const handleConfirm = async () => {
    const split_account = [];
    props.selected.forEach(x => {
        split_account.push({
            open_no: x.open_no,
            split_type: x.split_type
        });
    });
    await request('addSplitAccountServ', { split_account });
    emit('handle-confirm', props.selected);
};

// 手动关闭弹窗时
const handleClose = done => {
    emit('handle-confirm', false);
    done();
};

/* ---------------------------------- 控制弹窗 end ---------------------------------- */

/**
 * 列表配置项
 */
const tableColumns = computed(() => {
    const columns = [
        { label: '分账方信息', prop: 'corp_name', minWidth: '280' },
        { label: '主体类型', prop: 'corp_main_type_name', minWidth: '170' },
        { label: '分账方式', prop: 'split_type', minWidth: '170' }
    ];
    return columns;
});
</script>
<style lang="scss" scoped>
.select-account-dialog-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-alert {
        padding: 16px;
        :deep(.el-icon) {
            --el-alert-icon-size: 24px;
        }
        :deep(.el-alert__title) {
            font-size: 14px;
        }
    }
}

.select-account-dialog-table {
    margin: 18px 0;
    :deep(.el-input-number .el-input__inner) {
        text-align: left;
    }
}

.corp-name-main {
    font-size: 14px;
    font-weight: 400;
    color: #33302d;
    margin-bottom: 8px;
    padding: 0 5px;
}

.corp-name-sub {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 14px;
    padding: 0 5px;
}

.custom-status-point {
    display: flex;
    align-items: center;
    line-height: normal;

    &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 8px;
        background-color: var(--status-bgcolor);
        border-radius: 4px;
    }

    .custom-status-icon {
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left: 6px;
    }
}
.custom-header-col {
    display: flex;
    align-items: center;
    line-height: initial;
}
</style>
